import React, { PureComponent } from 'react';
import { Slider } from '@alifd/next';

export default class Banner extends PureComponent {
  static displayName = 'Banner';
  static propTypes = {};
  static defaultProps = {};

  render() {
    return (
      <div style={styles.container}>
        <Slider speed={3000} autoplay autoplaySpeed={10000} adaptiveHeight={true} style={styles.slider}>
          <div style={{ backgroundImage: `url(${require('./images/bg1.jpg')})`,  
                        backgroundSize: 'cover',
                        backgroundRepeat: 'no-repeat',
                        height: '700px' 
                      }}>
            <div style={styles.content}>
                <div key="title" style={styles.title}>
                  推荐作品1
                </div>
            </div>
          </div>
          <div style={{ backgroundImage: `url(${require('./images/bg2.jpg')})`, 
                        backgroundSize: 'cover',
                        backgroundPosition: '50%',
                        backgroundRepeat: 'no-repeat',
                        height: '700px', 
                      }}>
            <div style={styles.content}>
                <div key="title" style={styles.title}>
                  推荐作品2
                </div>
            </div>
          </div>
          <div style={{ backgroundImage: `url(${require('./images/bg3.jpg')})`,
                        backgroundSize: 'cover',
                        backgroundPosition: '50%',
                        backgroundRepeat: 'no-repeat',
                        height: '700px',
                      }}>
            <div style={styles.content}>
                <div key="title" style={styles.title}>
                  推荐作品3
                </div>
            </div>
          </div>
        </Slider>
      </div>
    );
  }
}

const styles = {
  container: {
    width: '100%',
    height: '700px',
    marginTop: '78px',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: '240px',
    width: '100%',
    zIndex: '10',
  },
  title: {
    fontSize: '110px',
    lineHeight: '154px',
    letterSpacing: '24px',
    fontWeight: '700',
    color: '#fff',
  }
};
